<template>
  <div class="chart-editor">
    <!-- 头部 -->
    <!-- 顶部标题栏 -->
    <el-row class="header-row">
      <el-col :span="24" class="header-content">
        <h1>指标看板</h1>
        <div class="header-info">
          <el-button type="primary" @click="showAddModal = true">添加图表</el-button>
        </div>
      </el-col>
    </el-row>

    <!-- 画布区域 -->
    <div class="canvas" @click="placeChart" @mousemove="handleCanvasMouseMove">
      <!-- 放置预览 -->
      <div class="placement-preview" v-if="isPlacingMode" :style="{ left: previewX + 'px', top: previewY + 'px' }">
      </div>

      <!-- 图表列表 -->
      <chart-item v-for="chart in charts" :key="chart.id" :chart="chart" @config="openConfigModal" @delete="deleteChart"
        @drag="handleChartDrag" @resize="handleChartResize"></chart-item>



    </div>
    <!-- 添加图表模态框 -->
    <modal v-model="showAddModal" title="选择图表类型">
      <div class="chart-types">
        <div class="chart-type-item" v-for="type in chartTypes" :key="type.value" @click="selectChartType(type)">
          {{ type.label }}
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn-secondary" @click="showAddModal = false">取消</button>
      </div>
    </modal>

    <!-- 配置图表模态框 -->
    <modal v-model="showConfigModal" :title="configTitle">
      <div class="form-group" v-if="currentChart">
        <label>标题</label>
        <input type="text" v-model="configForm.title" placeholder="输入图表标题">
      </div>
      <div class="form-group" v-if="currentChart">
        <label>X轴数据 (逗号分隔)</label>
        <input type="text" v-model="configForm.xAxisData" placeholder="一月,二月,三月">
      </div>
      <div class="form-group" v-if="currentChart">
        <label>Y轴数据 (逗号分隔)</label>
        <input type="text" v-model="configForm.yAxisData" placeholder="10,20,30">
      </div>
      <div class="modal-footer">
        <button class="btn-secondary" @click="showConfigModal = false">取消</button>
        <button class="btn-primary" @click="saveChartConfig">保存</button>
      </div>
    </modal>


  </div>
</template>

<script>
import modal from '@/components/DashComponent/ModalComponent.vue'
import ChartItem from '@/components/DashComponent/ChartItemComponent.vue'
export default {
  name: 'ChartEditor',
  components: {
    modal,
    ChartItem
  },
  data() {
    return {
      charts: [],
      chartTypes: [
        { label: '柱状图', value: 'bar' },
        { label: '折线图', value: 'line' },
        { label: '饼图', value: 'pie' }
      ],
      showAddModal: false,
      showConfigModal: false,
      currentChartId: null,
      selectedChartType: null,
      isPlacingMode: false,
      previewX: 0,
      previewY: 0,
      configForm: {
        title: '',
        xAxisData: '',
        yAxisData: '',
        x: 0,
        y: 0,
        width: 400,
        height: 300
      }
    }
  },
  computed: {
    currentChart() {
      return this.charts.find(chart => chart.id === this.currentChartId)
    },
    configTitle() {
      if (!this.currentChart) return '配置图表'
      const typeLabel = this.chartTypes.find(t => t.value === this.currentChart.type)?.label
      return `配置${typeLabel}`
    }
  },
  created() {
    // 从本地存储加载数据
    const savedCharts = localStorage.getItem('charts')
    if (savedCharts) {
      this.charts = JSON.parse(savedCharts)
    }
  },
  methods: {
    // 选择图表类型
    selectChartType(type) {
      this.selectedChartType = type
      this.showAddModal = false
      this.isPlacingMode = true
    },

    // 处理画布鼠标移动
    handleCanvasMouseMove(e) {
      if (this.isPlacingMode) {
        const rect = e.currentTarget.getBoundingClientRect()
        this.previewX = e.clientX - rect.left - 200 // 居中
        this.previewY = e.clientY - rect.top - 150
      }
    },

    // 放置图表
    placeChart(e) {
      if (!this.isPlacingMode || !this.selectedChartType) return

      const rect = e.currentTarget.getBoundingClientRect()
      const x = e.clientX - rect.left - 200
      const y = e.clientY - rect.top - 150

      // 创建新图表
      const newChart = {
        id: 'chart_' + Date.now(),
        type: this.selectedChartType.value,
        x,
        y,
        width: 400,
        height: 300,
        title: `${this.selectedChartType.label}示例`,
        xAxis: ['一月', '二月', '三月', '四月', '五月'],
        yAxis: [
          Math.floor(Math.random() * 100),
          Math.floor(Math.random() * 100),
          Math.floor(Math.random() * 100),
          Math.floor(Math.random() * 100),
          Math.floor(Math.random() * 100)
        ]
      }

      this.charts.push(newChart)
      this.saveCharts()

      // 重置状态
      this.isPlacingMode = false
      this.selectedChartType = null
    },

    // 打开配置模态框
    openConfigModal(chartId) {
      this.currentChartId = chartId
      const chart = this.currentChart

      if (chart) {
        this.configForm = {
          title: chart.title,
          xAxisData: chart.xAxis.join(','),
          yAxisData: chart.yAxis.join(','),
          x: chart.x,
          y: chart.y,
          width: chart.width || 400,
          height: chart.height || 300
        }
      }

      this.showConfigModal = true
    },

    // 保存图表配置
    saveChartConfig() {
      if (!this.currentChartId) return

      const index = this.charts.findIndex(chart => chart.id === this.currentChartId)
      if (index === -1) return

      // 更新数据
      this.charts[index] = {
        ...this.charts[index],
        title: this.configForm.title,
        xAxis: this.configForm.xAxisData.split(',').map(item => item.trim()),
        yAxis: this.configForm.yAxisData.split(',').map(item => parseFloat(item.trim())),
        x: this.configForm.x,
        y: this.configForm.y,
        width: this.configForm.width,
        height: this.configForm.height
      }

      this.saveCharts()
      this.showConfigModal = false
    },

    // 删除图表
    deleteChart(chartId) {
      this.charts = this.charts.filter(chart => chart.id !== chartId)
      this.saveCharts()
    },

    // 处理图表拖拽
    handleChartDrag({ chartId, x, y }) {
      const index = this.charts.findIndex(chart => chart.id === chartId)
      if (index !== -1) {
        this.charts[index].x = x
        this.charts[index].y = y
        this.saveCharts()
      }
    },

    // 处理图表调整大小
    handleChartResize({ chartId, width, height }) {
      const index = this.charts.findIndex(chart => chart.id === chartId)
      if (index !== -1) {
        this.charts[index].width = width
        this.charts[index].height = height
        this.saveCharts()
      }
    },

    // 保存到本地存储
    saveCharts() {
      localStorage.setItem('charts', JSON.stringify(this.charts))
    }
  }
}
</script>

<style scoped>
.chart-editor {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  padding: 15px;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.add-btn {
  background: #42b983;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.canvas {
  position: relative;
  flex: 1;
  background: #fafafa;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  overflow: hidden;
}

.placement-preview {
  position: absolute;
  min-width: 200px;
  min-height: 200px;
  width: 400px;
  height: 300px;
  border: 2px dashed #42b983;
  border-radius: 8px;
  background: rgba(66, 185, 131, 0.1);
  pointer-events: none;
}

.chart-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px 0;
}

.chart-type-item {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
}

.chart-type-item:hover {
  background: #f5f5f5;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

button {
  padding: 8px 16px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
}

.btn-primary {
  background: #42b983;
  color: white;
}

.btn-secondary {
  background: #ccc;
  color: #333;
}
</style>


<!-- 原版风格 -->
<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f9f9f9;
  min-height: 100vh;
}

.header-row {
  margin-bottom: 20px;
}

.header-content {
  background-color: #fff;
  padding: 15px 20px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content h1 {
  margin: 0;
  font-size: 24px;
  color: #333;
  font-weight: 600;
}

.header-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.update-time {
  color: #666;
  font-size: 14px;
}

.kpi-row {
  margin-bottom: 20px;
}

.kpi-card {
  height: 100%;
}

.kpi-card .el-card {
  height: 100%;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.kpi-card .el-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.kpi-title {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}

.kpi-value {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.kpi-trend {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.kpi-trend.up {
  color: #e74c3c;

}

.kpi-trend.down {
  color: #42b983;

}

.chart-row {
  margin-bottom: 20px;
}

.chart-card {
  height: 100%;
}

.chart-card .el-card {
  height: 100%;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #333;
}

.chart-container {
  width: 100%;
  height: calc(100% - 44px);
  min-height: 300px;
}

.chart {
  width: 100%;
  height: 100%;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .kpi-card {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .chart-card {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 768px) {
  .kpi-card {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .chart-card {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .header-info {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .kpi-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.is-selected {
  color: #1989FA;
}
</style>

<style scoped>
.table-pagination-container {
  padding: 20px;
}

.pagination-container {
  margin-top: 15px;
  text-align: right;
}
</style>